<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>填写调查问卷</title>

  <link rel="stylesheet" href="/statics/css/bootstrap.min.css">
  <link rel="stylesheet" href="/statics/css/users.css">
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!-- 网页icon头像 -->
  <link rel="shortcut icon" href="/statics/img/loginOk.png">

</head>

<body>
  <div id="container">

    <div class="row" style="margin-right: 0px;">
      <!-- 左布局 -->
      <div class="col">

      </div>
      <!-- 中间布局 -->
      <div class="col">

        <form class="layui-form" id="QuestionForm" action="/home/SQ1judge" method="POST">

          <table class="layui-table" lay-skin="line">
            <!-- 第一题 -->
            <tr>
              <td>
                  <label for=""><h3>问卷主题：{{QSTheme}}</h3></label>
              </td>
          </tr>
            <!-- 第一题 -->
            <tr>
              <td>
                  <label for=""><h3>选项填写范围：1~10</h3></label>
              </td>
          </tr>
            <tr>
              <td>
                <h4><strong>1.{{topicOne}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question1Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第二题 -->
            <tr>
              <td>
                <h4><strong>2.{{topicTwo}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question2Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第三题 -->
            <tr>
              <td>
                <h4><strong>3.{{topicThree}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question3Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第四题 -->
            <tr>
              <td>
                <h4><strong>4.{{topicFour}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question4Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第五题 -->
            <tr>
              <td>
                <h4><strong>5.{{topicFive}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question5Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第六题 -->
            <tr>
              <td>
                <h4><strong>6.{{topicSix}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question6Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第七题 -->
            <tr>
              <td>
                <h4><strong>7.{{topicSeven}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question7Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第八题 -->
            <tr>
              <td>
                <h4><strong>8.{{topicEight}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question8Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第九题 -->
            <tr>
              <td>
                <h4><strong>9.{{topicNine}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question9Box" name="title" required lay-verify="required" placeholder="请输入分数1~10"
                  autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>
            <!-- 第十题 -->
            <tr>
              <td>
                <h4><strong>10.{{topicTen}}</strong></h4>
              </td>
            <tr>
              <td>
                <input type="text" id="Question10Box" name="title" required lay-verify="required"
                  placeholder="请输入分数1~10" autocomplete="off" class="layui-input">
              </td>
            </tr>
            </tr>

          </table>






        </form>

      </div>

      <!-- 右布局 -->
      <div class="col">
        <div class="card" style="width: 18rem;">
          <img src="/statics/img/userHeadPortrait.jpg" class="card-img-top" alt="">
          
          <ul class="list-group list-group-flush">
            <li class="list-group-item" id="introductionColumn">用户：{{username}}</li>
            <li class="list-group-item" id="introductionColumn">
              当前问卷编号： <label for="" id="qsId" value="{{qsId}}">{{qsId}}</label></li>
            <li class="list-group-item" id="introductionColumn">问卷创建时间：{{createdAt}}</li>
          </ul>
          <div class="card-body">

            <!-- 个人信息 -->
            <a href="#" class="card-link btn btn-info " style="margin: 1rem;" onclick="cancel()"> 取消填写</a>
            <a href="#" class="card-link btn btn-info" style="margin: 1rem;" onclick="submitForm()"> 提交</a>
            <label for="" class="errorSubmitForm invisible" style="color: red;"><strong>未完成所有题目，请检查后再提交</strong></label>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>



  <script src="/statics/js/jquery-3.6.0.min.js"></script>
  <!-- axios -->
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

  <script src="/statics/js/bootstrap.min.js"></script>
  <script src="/statics/js/SpiderWeb.js"></script>
  <script src="../layui/layui.js"></script>
  <script>
    layui.use(['layer', 'form'], function () {
      var layer = layui.layer
        , form = layui.form;
    });
  </script>
  <!-- 取消填写按钮 -->
  <script>
    function cancel(){
      layer.confirm('确定退出问卷填写？', {
  btn: ['确定', '取消'] //可以无限个按钮
  ,btn2: function(index, layero){
    //按钮【按钮二】的回调
  }
}, function(index, layero){
  window.location.href = '/home';
});
    }
  </script>

  <!-- 表单提交按钮点击事件 -->
  <script>

    function submitForm() {
      var qsId = $("#qsId").html();

      // 1~10的正则
      var reg = /^(?:0|[1-9]|10)$/;

      //第一题判断
      var Question1 = $("#Question1Box").val();
      // console.log(Question1);
      // console.log(reg.test(Question1));
      if (Question1 === "" || reg.test(Question1) === false) {
        //第一题未选择
        fn_errorSubmitForm("第一题答案未填写或超出指定范围");
      } else {
        //第二题判断
        var Question2 = $("#Question2Box").val();
        // console.log(Question2);
        if (Question2 === "" || reg.test(Question2) === false) {
          //第二题未选择
          fn_errorSubmitForm("第二题答案未填写或超出指定范围");
        } else {
          //第三题判断
          var Question3 = $("#Question3Box").val();
          // console.log(Question3);
          if (Question3 === "" || reg.test(Question3) === false) {
            //第三题未选择
            fn_errorSubmitForm("第三题答案未填写或超出指定范围");
          } else {
            //第四题判断
            var Question4 = $("#Question4Box").val();
            if (Question4 === "" || reg.test(Question4) === false) {
              //第四题未选择
              fn_errorSubmitForm("第四题答案未填写或超出指定范围");
            } else {
              //第五题判断
              var Question5 = $("#Question5Box").val();
              if (Question5 === "" || reg.test(Question5) === false) {
                //第一题未选择
                fn_errorSubmitForm("第五题答案未填写或超出指定范围");
              } else {
                //第六题判断
                var Question6 = $("#Question6Box").val();
                if (Question6 === "" || reg.test(Question6) === false) {
                  //第一题未选择
                  fn_errorSubmitForm("第六题答案未填写或超出指定范围");
                } else {
                  //第七题判断
                  var Question7 = $("#Question7Box").val();
                  if (Question7 === "" || reg.test(Question7) === false) {
                    //第七题未选择
                    fn_errorSubmitForm("第七题答案未填写或超出指定范围");
                  } else {
                    //第八题判断
                    var Question8 = $("#Question8Box").val();
                    if (Question8 === "" || reg.test(Question8) === false) {
                      //第八题未选择
                      fn_errorSubmitForm("第八题答案未填写或超出指定范围");
                    } else {
                      //第九题判断
                      var Question9 = $("#Question9Box").val();
                      if (Question9 === "" || reg.test(Question9) === false) {
                        //第九题未选择
                        fn_errorSubmitForm("第九题答案未填写或超出指定范围");
                      } else {
                        //第十题判断
                        var Question10 = $("#Question10Box").val();
                        // console.log(reg.test(Question1));
                        if (Question10 === "" || reg.test(Question10) === false) {
                          //第十题未选择
                          fn_errorSubmitForm("第十题答案未填写或超出指定范围");
                        } else {
                          axios({
                            method: 'post',
                            url: '/home/SQ1judge',
                            data: {
                              qsId,
                              Question1,
                              Question2,
                              Question3,
                              Question4,
                              Question5,
                              Question6,
                              Question7,
                              Question8,
                              Question9,
                              Question10,
                            }
                          }).then(function (response) {
                            var res = response.data;
                            if (res.code === 200) {
                              window.location.href = '/home/SQ1Ok';
                            }

                          })
                          // 提交表单
                          // $("#QuestionForm").submit(); 

                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

    }
  </script>
  <script>
    // 用户名下面的错误提示函数
    function fn_errorSubmitForm(errorHint) {
      $('.errorSubmitForm').text(errorHint);
      $('.errorSubmitForm').removeClass('invisible');
      setTimeout(() => {
        $('.errorSubmitForm').addClass('invisible');
      }, 5000);
    }
  </script>
  <!-- 鼠标点击特效  -->
  <!-- <script type="text/javascript">
    var a_idx = 0;
    jQuery(document).ready(function ($) {
      $("body").click(function (e) {
        var a = new Array("(⌒▽⌒)", "(=・ω・=)", "(ﾟДﾟ≡ﾟдﾟ)!?", "Σ( ￣□￣||)", "(▔□▔)/", "Σ(ﾟдﾟ;)", "(^・ω・^ )", "（￣へ￣）", "(￣ε(#￣) Σ", "ヽ(`Д´)ﾉ", "(╯°口°)╯┴—┴", "🍕", "🍔", "🌭", "🥞", "🍳", "🍞", "🥐", "🍠", "🥙", "🍤", "🥩", "🍖", "🥂", "🥗", "🧀", "🍱", "🍝", "🐷", "❤", "🤣", "💕", "💖", "🌹", "💋", "🎂", "🎉", "🎃", "🎈", "🎀", "🎊", "🚗", "🎄", "❤", "💕", "💞", "💓", "💗", "💖", "💘", "💝", "💟", "💌", "🍟", "🍗", "🍿", "江呆呆是个憨憨💕💟💌");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
          y = e.pageY;
        $i.css({
          "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
          "top": y - 20,
          "left": x,
          "position": "absolute",
          "font-weight": "bold",
          "color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
        });
        $("body").append($i);
        $i.animate({
          "top": y - 180,
          "opacity": 0
        },
          1500,
          function () {
            $i.remove();
          });
      });
    });
  </script> -->

</body>


</html>